<template>
    <div class="app-container">
       <el-row :gutter="20">
          <!--用户数据-->
          <el-col  :xs="24">
             <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
                      icon="Plus"
                      @click="handleAdd"
                   >添加</el-button>
                </el-col>
                <right-toolbar :search="false"  @queryTable="getList" ></right-toolbar>
             </el-row>
 
             <el-table v-loading="loading"  :data="tagList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="标签名称" align="center"  prop="label" />
                <el-table-column label="自动打标签条件" align="center" >
                  <template #default="scope">
                       <div> 累计成功借贷：{{scope.row.totalLoanCount}}笔 &nbsp; &nbsp; 累计借贷金额：¥{{ scope.row.totalLoanAmount }}.00</div>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="center"  prop="remark"  :show-overflow-tooltip="true" />
               
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                   <template #default="scope">
                      <el-tooltip content="编辑" placement="top" >
                         <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                         <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
                      </el-tooltip>
                   </template>
                </el-table-column>
             </el-table>
             <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageSize"
                v-model:limit="queryParams.pageCount"
                @pagination="getList"
             />
          </el-col>
       </el-row>
 
       <!-- 添加或修改用客户标签对话框 -->
       <el-dialog :title="title" v-model="openTag" width="600px" append-to-body>
          <el-form :model="form" :rules="rules" ref="tagRef" label-width="130px">
             <el-row>
                <el-col :span="16">
                   <el-form-item  label="标签名称：" prop="label">
                      <el-input v-model="form.label" placeholder="请输入标签名称" maxlength="30" />
                   </el-form-item>
                   <el-form-item  label="自动打标签条件：" prop="totalLoanCount">
                     <el-row>
                        <el-col :span="10">累计成功借贷</el-col>
                        <el-col :span="14"><el-input v-model="form.totalLoanCount"   oninput="value=value.replace(/^0|[^0-9]/g, '')">
                           <template #append>笔</template>
                        </el-input>
                        </el-col>
                     </el-row>
                   </el-form-item>
                   <el-form-item  label="或者" prop="totalLoanAmount">
                     <el-row>
                        <el-col :span="10">累计成功借贷</el-col>
                        <el-col :span="14"><!--/[^\d]/g-->
                        <el-input v-model="form.totalLoanAmount"   oninput="value=value.replace(/^0|[^0-9]/g, '')" > <template #append>元</template></el-input>
                        </el-col>
                     </el-row>
                   </el-form-item>
                   <el-form-item label="备注:">
                      <el-input v-model="form.remark" rows="4" type="textarea" placeholder="请输入备注"></el-input>
                   </el-form-item>
                </el-col>
             </el-row>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <script setup name="Tag">
 import { getToken } from "@/utils/auth";
 import { listCustomerTag,addCustomerTag,updateCustomerTag ,queryCustomerTag,delCustomerTag} from "@/api/customer/tag";
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 
 const tagList = ref([]);
 const openTag = ref(false);
 const loading = ref(false);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");

 
 const data = reactive({
   form: {},
   queryParams: {
      pageSize: 1,
      pageCount: 10,
   },
   rules: {
     label: [{ required: true, message: "标签名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "标签名称长度必须介于 2 和 20 之间", trigger: "blur" }],
    
   }
 });
 
 const { queryParams, form, rules } = toRefs(data);

 /** 查询用户列表 */
 function getList() {
   loading.value = true;
   listCustomerTag(queryParams.value).then(res => {
      tagList.value = []
     loading.value = false;
     if(res.data.total_page > 0){
      tagList.value = res.data.list
     }else{
      tagList.value = []
     }
     total.value = tagList.value.length;
   });
 };
 /** 删除按钮操作 */
 function handleDelete(row) {
   proxy.$modal.confirm('确定要删除该标签吗？').then(function () {
     return delCustomerTag(row.id);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
   }).catch(() => {});
 };
 /** 重置密码按钮操作 */
 function handleResetPwd(row) {
   proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     closeOnClickModal: false,
     inputPattern: /^.{5,20}$/,
     inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
   }).then(({ value }) => {
     resetUserPwd(row.userId, value).then(response => {
       proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
     });
   }).catch(() => {});
 };
 /** 选择条数  */
 function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.userId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
 /** 重置操作表单 */
 function reset() {
   form.value = {
      label: undefined,
     remark: undefined,
     totalLoanCount: undefined,
     totalLoanAmount: undefined,
   };
   proxy.resetForm("tagRef");
 };
 /** 取消按钮 */
 function cancel() {
   openTag.value = false;
   reset();
 };
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   title.value = "添加标签类型";
   openTag.value = true;
 };
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
   title.value = "编辑客户标签";
   queryCustomerTag(row.id).then(response => {
     form.value = response.data;
     openTag.value = true;
     title.value = "修改用户";
   });
 };
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["tagRef"].validate(valid => {
     if (valid) {
       if (form.value.id != undefined) {
         updateCustomerTag(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           openTag.value = false;
           getList();
         });
       } else {
         addCustomerTag(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           openTag.value = false;
           getList();
         });
       }
     }
   });
 };
 
 getList();
 </script>
 <style scoped>
 .explain{
    line-height: 40px;
    font-size: 12px;
    margin-left:90px;
 }
 </style>
 